<template>
	<view class="scan-container">
		<!-- 结果弹窗 用于调试-->
		<uni-popup ref="resultPopup" type="dialog">
			<uni-popup-dialog title="扫码结果" :content="scanResult"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted

	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 状态管理
	const cameraActive = ref(false)
	const scanResult = ref('')
	const resultPopup = ref(null)
	onLoad((e) => {
		initScan()
	})

	onUnmounted(() => {
		stopScan()
	})

	// 初始化扫码
	const initScan = async () => {
		cameraActive.value = true
		setTimeout(scanQRCode, 300) // 稍等相机初始化
	}
	// 停止扫描
	const stopScan = () => {
		cameraActive.value = false
	}

	// 扫码功能
	const scanQRCode = () => {
		uni.scanCode({
			onlyFromCamera: false, // 只允许相机扫码
			autoZoom: true,
			scanType: ['qrCode', 'pdf417', 'datamatrix', 'barCode'],
			autoDecodeCharset: true,
			success: (res) => {
				handleScanResult(res.result)
			},
			fail: (err) => {
				console.error('扫码失败:', err)
				uni.showToast({
					title: '扫码失败',
					icon: 'none'
				})
				uni.navigateBack()
			},
			complete: () => {
				cameraActive.value = false
			}
		})
	}


	// 处理扫码结果
	const handleScanResult = (result) => {
		if (result) {
			// scanResult.value = result
			const encodedUid = encodeURIComponent(result);
			cameraActive.value = false
			uni.navigateTo({
				url: `/Device/AddManually/AddManually?uid=${encodedUid}&&isQr=true`
			})
		}
	}

	// 显示结果弹窗
	const showResultModal = () => {
		uni.showModal({
			title: '扫码结果',
			content: scanResult.value,
			confirmText: '复制',
			success: (res) => {
				if (res.confirm) {
					uni.setClipboardData({
						data: scanResult.value
					})
				}
			}
		})
	}
</script>

<style scoped lang="scss">
	.scan-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative;
	}

	.camera {
		flex: 1;
		width: 100%;
	}

	.scan-box {
		width: 100%;
		position: relative;
		border: 2px solid rgba(255, 255, 255, 0.7);
		box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
		z-index: 99;
	}

	.scan-line {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 255, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
	}

	.corner {
		position: absolute;
		width: 30px;
		height: 30px;
		border-width: 4px;
		border-color: #00ff00;
	}

	.corner-top-left {
		top: -4px;
		left: -4px;
		border-left-style: solid;
		border-top-style: solid;
		border-radius: 4px 0 0 0;
	}

	.corner-top-right {
		top: -4px;
		right: -4px;
		border-right-style: solid;
		border-top-style: solid;
		border-radius: 0 4px 0 0;
	}

	.corner-bottom-left {
		bottom: -4px;
		left: -4px;
		border-left-style: solid;
		border-bottom-style: solid;
		border-radius: 0 0 0 4px;
	}

	.corner-bottom-right {
		bottom: -4px;
		right: -4px;
		border-right-style: solid;
		border-bottom-style: solid;
		border-radius: 0 0 4px 0;
	}

	.scan-tip {
		position: absolute;
		bottom: 500rpx;
		left: 0;
		right: 0;
		text-align: center;
		color: #fff;
		font-size: 16px;
		padding: 10px;
		border-radius: 8px;
		z-index: 99;
	}
</style>